$(function (){

    // 判断购物车是否有数据
    if (localStorage.getItem('id')) {
        // console.log(goodsid)
        // 获取数据并渲染
        $.ajax({
            url: './js/goods.json',
            type: 'get',
            dataType: 'json',
            success: function (data){
                // console.log( data )//所有数据
                // 遍历json数据
                $.each(data,function (index,item){
                    // 获取json对象的id
                    var jsid = item.id
    
                    // 获取本地存储中用于渲染购物车页的shid
                    var shid = JSON.parse(localStorage.getItem("shid"))
                    // 遍历本地存储中的数据
                    $.each(shid,function(index,value){
                        if (value.id == jsid) {
                            // console.log(value.id)
                            var goodsDom = `
                            <ul class="list">
                            <li>
                                <input type="checkbox" name="xuan">
                            </li>
                            <li>
                                <img src="${item.imgurl}" alt="" width="100" height="100">
                            </li>
                            <li>
                                <button>-</button>
                                <input type="text" size='1'value='1'>
                                <button>+</button>
                            </li>
                            <li>
                                ￥<span>${item.price}</span>
                            </li>
                            <li>索尼相机</li>
                            <li>
                                ￥<span>${item.price}</span>
                            </li>
                            <li><button class="del" data-id='${item.id}'>删除</button></li>
                           </ul>
                            `
                            // console.log(goodsDom)
                            $('.content').append(goodsDom)
                        }
                    })
                       
                })
            }
        })

    }
})
var div1=document.querySelector('.box')
var xuans=document.getElementsByName('xuan')
var content=document.querySelector('.content')
var floor=document.querySelector(".floor")
var a=3 //图片名称
//给当前div对象绑定点击事件
div1.onclick=function(e){
    //事件对象兼容
    var e = e || window.event
    //点击对象兼容
    var target= e.target || e.srcElement
    //全选
    if(target.name=="quan"){
        //遍历所有的选中框对象
        for(var i=0;i<xuans.length;i++){
            //判断当前全选框是否被选中
            if(target.checked){
                xuans[i].checked=true
            }else{
                xuans[i].checked=false
            }
        }
    }
    //加法
    if(target.innerHTML=="+"){
        //获取输入框中的value值
        var val=target.previousElementSibling.value
        val++
        //把操作结果重新赋值给输入框
        target.previousElementSibling.value=val
        //获取当前商品对象
        var ul1=target.parentNode.parentNode
        //获取单价
        var price=ul1.children[3].lastElementChild.innerHTML
        //计算小计
        var xiaoji=val*price
        //把计算结果重新赋值给小计
        ul1.children[5].lastElementChild.innerHTML=xiaoji
        total()
    }
    //减法
    if(target.innerHTML=="-"){
        //获取输入框中的value值
        var val=target.nextElementSibling.value
        if(val<=1){
            val=1
        }else{
            val--
        }
        //把操作结果重新赋值给输入框
        target.nextElementSibling.value=val
        //获取当前商品对象
        var ul1=target.parentNode.parentNode
        //获取单价
        var price=ul1.children[3].lastElementChild.innerHTML
        //计算小计
        var xiaoji=val*price
        //把计算结果重新赋值给小计
        ul1.children[5].lastElementChild.innerHTML=xiaoji
        total()
    }
    //删除一行
    if(target.innerHTML=="删除"){
        target.parentNode.parentNode.remove()
        total()
    }
    //增加一行
    // if(target.innerHTML=="增加"){
    //     //创建ul对象
    //     var newUl=document.createElement("ul")
    //     //给ul对象添加内容
    //     newUl.innerHTML='<li>'
    //         +'<input type="checkbox" name="xuan">'
    //         +'</li>'
    //         +'<li>'
    //             +'<img src="./img/'+a+'.jpg" alt="" width="100" height="100">'
    //             +'</li>'
    //             +'<li>'
    //                 +'<button>-</button>'
    //                 +'<input type="text" size="1" value="1">'
    //                 +'<button>+</button>'
    //                 +'</li>'
    //                 +'<li>'
    //                     +'￥<span>2300.50</span>'
    //                     +'</li>'
    //                     +'<li>数码相机</li>'
    //                     +'<li>'
    //                         +'￥<span>2300.50</span>'
    //                         +'</li>'
    //                         +'<li><button>删除</button></li>'
        
    //     a++
    //     //判断a变量
    //     if(a>7){
    //         a=1
    //     }
    //     //把当前新节点追加内容区域中
    //     content.appendChild(newUl)
    //     total()
    // }
    //全删
    if(target.innerHTML=="全删"){
        //直接删除所有内容
        //遍历所有选中框对象
        // for(var i=xuans.length-1;i>=0;i--){
        //     xuans[i].parentNode.parentNode.remove()
        // }

        /* for(var i=0;i<xuans.length;i++){
            xuans[i].parentNode.parentNode.remove()
            i--
        } */

        //删除被选中的商品
        for(var i=xuans.length-1;i>=0;i--){
            //判断当前选中框是否被选中
            if(xuans[i].checked){
                xuans[i].parentNode.parentNode.remove()
            }
        }
        total()
    }
}
//总计
function total(){
    //获取所有商品
    var uls=content.children
    var sum=0 //总计
    var num=0 //数量
    //遍历所有商品
    for(var i=0;i<uls.length;i++){
        //获取当前商品的小计
        var xiaoji=uls[i].children[5].lastElementChild.innerHTML
        //获取当前商品的数量
        var mm=uls[i].children[2].querySelector('input').value
        num+=parseInt(mm)
        sum+=parseFloat(xiaoji)
    }
    //给总计的位置赋值
    floor.lastElementChild.previousElementSibling.innerHTML=sum
    //给总数量的位置赋值
    floor.lastElementChild.innerHTML=num
}
total()
    